<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div1 {
            background: #888686;
            width: 300px;
            height: 200px;
            border: 1px solid #2c2c2c;
            line-height: 200px;
            text-align: center
        }
    </style>



</head>

<body>
    <div id="div1">
        拖到这里上传
    </div>
</body>
<script>
    /**
     *ondragenter   进去 
     *ondragleave   出去
     *ondragover    进去
     *ondrop        松手 
        reader.readAsText(oFile)   //读取文件
        reader.readAsDataURL(oFile)   //读取base64图片
        reader.readAsArrayBuffer(oFile)   //原始二进制数据        可以编辑     不实用
        reader.readAsBinaryString(oFile)   //二进制的文本形式数据 上传
     */
    let oDiv = document.getElementById('div1');
    oDiv.addEventListener('dragenter',function(){
        oDiv.innerHTML='请松手'
    },false)
    oDiv.addEventListener('dragleave',function(){
        oDiv.innerHTML='拖到这里上传'
    },false)
    oDiv.addEventListener('dragover',function(ev){
        ev.preventDefault()
    })
    oDiv.addEventListener('drop',function(ev){
        ev.preventDefault()
        let formData=new FormData();
        //接收文件对象
        Array.from(ev.dataTransfer.files).forEach(file=>{
            formData.append('f1',file)
        })
        //ajax

        let xhr=new XMLHttpRequest();
        xhr.upload.onerror=function(){
            console.log('上传失败')
        }
        xhr.upload.onload=function(){
            console.log('上传完成')
        }
        xhr.upload.onprogress=function(ev){
            console.log('上传完成')
            console.log((100*ev.loaded/ev.total).toFixed(2)+'%')


        }


        xhr.open('/post','/upload',true);
        xhr.send(formData);
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                alert(xhr.status)
            }
        }
    },false)
</script>

</html>